<template>
  <h2>watch</h2>
  <p>{{ count }}</p>
  <button @click="add">btn</button>
</template>

<script>
// watch需要解构，函数了
import { ref, watch } from "vue";
export default {
  setup() {
    const count = ref(1);
    const add = () => {
      count.value++;
    };

    // watch可以接受三个参数
    // 1. 目标的属性 2. 回调函数 3. 可选的配置选项
    watch(
      count,
      (val, oldVal) => {
        console.log(val, oldVal);
      },
      {
        deep: true,
        immediate: true,
      }
    );

    return {
      count,
      add,
    };
  },

  // watch: {
  //   count() {}
  // }
};
</script>
